<template xmlns:v-touch="http://www.w3.org/1999/xhtml">
  <div>
    <div style="text-align: center;color: #FF5E3A;margin-top: 11px;margin-bottom: 24px;font-size: 16px">{{numberValue}}.0</div>
    <div class="ruler " ref="testAA" style="border: 1px solid #B5C0CD;">
      <div class="main"
           :style="{'-webkit-transform': 'translateX(' +  mainValue + 'px)', 'width': getMainWidth+'px', position: 'relative',  left: '0px'}">
        <ul style="overflow: hidden;  -webkit-transform: translateX(45px);">
          <li v-touch:touchstart="onTouchStart" v-touch:touchmove="onTouchMove" v-touch:touchend="onTouchEnd"
              v-touch:touchcancel="onTouchEnd" v-for="(n,index) in itemCount" :key="n"><span class="num">{{min  + index * 5 }} </span>
          </li>
        </ul>
      </div>
      <div class="arrow"></div>
    </div>
  </div>

</template>
<script>

  export default {
    props: ["value", "min", "max", "onChange"],
    components: {},
    data: function () {
      return {
        mainValue: 0,
        end: 0,
        numberValue: this.value,
        start: 0,
        startX: 0,
        moveX: 0,
        X: 0,
        gap: this.value - this.min
      }
    },
    computed: {
      itemCount() {
        const num = this.max - this.min;
        let value = num / 5;
        return value + 1;
      },
      getMainWidth() {
        return ((this.max - this.min) / 5 + 2) * 104
      }
    },
    created() {

    },
    mounted() {
      this.calcInit(this.value);
    },
    methods: {

      calcInit(value) {
        let startValue = this.min - 5;
        let width = this.$refs.testAA.offsetWidth;

        let centerPX = width / 2 - 40;
        let offsetKe = centerPX / 104;
        while (offsetKe > 0) {
          if (offsetKe < 1) {
            startValue += offsetKe * 5;
          } else {
            startValue += 5
          }
          offsetKe--;
        }

        let offsetPx = ( value - startValue) / 5;
        offsetPx = offsetPx * 105 - offsetPx;
        this.mainValue = -offsetPx;
      },
      onTouchStart(e) {
        const that = this;
        e.stopPropagation();
        that.start = 0;
        that.end = -((this.max - this.min) * 20.8);
        that.startX = e.changedTouches[0].pageX - that.mainValue;
      },
      onTouchMove(e) {
        e.preventDefault();
        const that = this;
        that.moveX = e.changedTouches[0].pageX;
        that.X = that.moveX - that.startX;

        if (that.X > 0) {
          var vv = that.mainValue;
          if (vv >= that.start) {
            that.start = that.X > that.start ? that.start : that.X;
            that.mainValue = that.start;
          } else {
            that.mainValue = that.X;
          }
        } else {
          var vv = that.mainValue;
          if (vv <= that.end) {
            that.end = that.X < that.end ? that.end : that.X;
            that.mainValue = that.end;
          } else {
            that.mainValue = that.X;
          }
        }

        let width = this.$refs.testAA.offsetWidth;
        let startValue = this.min - 5;
        let centerValue = startValue;

        let centerPX = width / 2 - 40;
        let offsetKe = centerPX / 104;
        while (offsetKe > 0) {
          if (offsetKe < 1) {
            centerValue += offsetKe * 5;
          } else {
            centerValue += 5
          }
          offsetKe--;
        }
        let a = Math.abs(that.mainValue) / 20.8;
        that.numberValue = Math.round(centerValue + a);
        if(that.numberValue >= that.max){
          that.numberValue = that.max;
          that.calcInit(that.max);
          return ;
        }
        if(that.numberValue <= that.min){
          that.numberValue = that.min;
          that.calcInit(that.min);
          return ;
        }
      },
      onTouchEnd(var1, var2) {
        this.onChange && this.onChange(this.numberValue);
        this.calcInit( this.numberValue);
      }
    }
  }
</script>
<style>
  ul,li {
    list-style: none;
    padding: 0;
  }
  .ruler {
    height: 90px;
    overflow: hidden;
    position: relative;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-color: #F8FAFF;
  }

  .ruler li {
    float: left;
    width: 104px;
    height: 60px;
    background: url() left top no-repeat;
    background-size: 94px;
    padding-top: 30px;
    text-align: right;
    padding-left: 0;
  }

  .ruler li .num {
    display: inline-block;
    position: relative;
    margin-right: -6px;
  }

  .ruler .arrow {
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-top: 8px solid #ffa657;
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -8px;
  }

  .main li {
    background: url() left top no-repeat;
    background-size: 100px auto;
    color: #b5d0e1;
  }


</style>
